<template>
	<view class="box-content">
		<u-alert-tips v-if="title" type="warning" :show-icon="true" :title="title"
			:description="description"></u-alert-tips>
		<view class="apply-type">
			<view :class="current==0?'apply-type-selelct':'apply-type-content'" @click="current= 0">填写入驻信息</view>
			<!-- <view class="lines"></view>
			<view :class="current==1?'apply-type-selelct':'apply-type-content'" @click="current= 1">审核/签约开店</view> -->
		</view>
		<view class="apply-info">
			<view class="apply-info-title">
				<view class="title">门店信息</view>
				<view class="hint-text">
					本页信息提交后地址相关的信息将不能修改，请仔细参照营业证照信息填写门店信息
				</view>
			</view>
			<view class="apply-each">
				<view class="apply-title">
					<text>*</text>
					<view>门店名称</view>
				</view>
				<view class="input-box">
					<input type="text" placeholder="请输入门店名称" v-model="commitData.shopname" />
				</view>
			</view>
			<view class="apply-each">
				<view class="apply-title" @click="showP= true">
					<text>*</text>
					<view>城市</view>
				</view>
				<view class="input-box" style="line-height: 68rpx;padding: 0 30rpx;" @click="showP= true">
					<!-- <pickerAddress @change="change">{{txt}}</pickerAddress> -->
					{{cityList &&cityList[index] && cityList[index].name}}
				</view>
			</view>
			<view class="apply-each">
				<view class="apply-title">
					<text>*</text>
					<view>门店位置</view>
				</view>
				<view class="input-box">
					<input type="text" placeholder="请输入门店位置" v-model="commitData.shopAddress" />
				</view>
			</view>
			<view class="apply-each">
				<view class="apply-title">
					<text>*</text>
					<view>门店LOGO</view>
				</view>
				<view class="input-box imgs-content" style="border: 1rpx solid #CDCDCD;padding: 30rpx;">
					<view class="add-img">
						<view class="click-img">
							<image class="icon-img" @click="chooseImg2(0)"
								src="https://qiniu-cdn.maeiyun.com/imgs/shangjia/xiangji.png" mode=""></image>
							<view>添加图片</view>
						</view>
						<view class="show-img">
							<image style="width: 100%;height: 100%;" :src="commitData.logo" mode=""></image>
						</view>
					</view>
					<view class="hint-text">
						1.需全景拍摄，包含完整的门店牌匾、门框和入口，建议距离门店2米外拍摄，若门店正前方有遮挡物，可选择从侧面拍摄2.门脸图拍摄时门店必须为营业状态，不可关闭卷帘铁门，不可标示“暂不营业”“正在装修”“转让”“关闭”等信息3.图片需清晰、真实，不得有任何PS、水印、Logo
						和其它网站信息4.严禁多家门店使用相同门脸图/环境图
					</view>
				</view>
			</view>
			<view class="apply-each">
				<view class="apply-title">
					<text>*</text>
					<view>门店联系人</view>
				</view>
				<view class="input-box">
					<input type="text" placeholder="请输入门店联系人" v-model="commitData.linkman" />
				</view>
			</view>
			<view class="apply-each">
				<view class="apply-title">
					<text>*</text>
					<view>门店联系方式</view>
				</view>
				<view class="input-box">
					<input type="number" placeholder="请输入手机号" v-model="commitData.phone" />
				</view>
			</view>
			<view class="apply-each">
				<view class="apply-title">
					<text>*</text>
					<view>联系方式验证码</view>
				</view>
				<view class="input-box" style="display: flex;align-items: center;">
					<input type="number" placeholder="请输入验证码" v-model="commitData.code" />
					<view plain v-if="!isSend" class="code" @click="sendCode">{{sendcodetext}}</view>
					<view v-if="isSend" class="code">{{sendcodetext}}</view>
				</view>
			</view>
			
			<view class="apply-each">
				<view class="apply-title">
					<text>*</text>
					<view>门店联系邮箱<text style="color: #CDCDCD;font-size: 24rpx;">(用于接收导出数据或重要通知)</text></view>
				</view>
				<view class="input-box">
					<input type="text"  placeholder="请输入门店联系邮箱" v-model="commitData.email" />
				</view>
			</view>
		
			<view class="apply-each">
				<view class="apply-title">
					<text>*</text>
					<view>法人身份证</view>
				</view>
				<view class="input-box imgs-content">
					<view class="add-img">
						<view class="card-img">
							<image class="icon-img" @click="chooseImg(1)"
								:src="commitData.legalperson1?commitData.legalperson1:'https://qiniu-cdn.maeiyun.com/imgs/shangjia/c1.png'"
								mode="widthFix">
							</image>
							<view>人像面</view>
						</view>
						<view class="card-img">
							<image class="icon-img" @click="chooseImg(2)"
								:src="commitData.legalperson2?commitData.legalperson2:'https://qiniu-cdn.maeiyun.com/imgs/shangjia/c2.png'"
								mode="widthFix">
							</image>
							<view>国徽面</view>
						</view>
					</view>
				</view>
			</view>

			<view class="apply-each">
				<view class="apply-title">
					<text>*</text>
					<view>公司营业执照</view>
				</view>
				<view class="input-box imgs-content">
					<image class="fa-code" @click="chooseImg(3)"
						:src="commitData.businesslicense?commitData.businesslicense:'https://qiniu-cdn.maeiyun.com/imgs/shangjia/d1.png' "
						mode="widthFix"></image>
				</view>
			</view>
			<view v-if="isbus">
				<view class="apply-each">
					<view class="apply-title">
						<text>*</text>
						<view>公司名称</view>
					</view>
					<view class="input-box">
						<input type="text" placeholder="请输入公司名称" v-model="commitData.company_name" />
					</view>
				</view>
				<view class="apply-each">
					<view class="apply-title">
						<text>*</text>
						<view>注册地址</view>
					</view>
					<view class="input-box">
						<input type="text"  disabled v-model="commitData.company_address" />
					</view>
				</view>
				<view class="apply-each">
					<view class="apply-title">
						<text>*</text>
						<view>注册资金</view>
					</view>
					<view class="input-box">
						<input type="text" disabled v-model="commitData.company_price" />
					</view>
				</view>
				<view class="apply-each">
					<view class="apply-title">
						<text>*</text>
						<view>法人姓名</view>
					</view>
					<view class="input-box">
						<input type="text" disabled v-model="commitData.company_user_name" />
					</view>
				</view>
				<view class="apply-each">
					<view class="apply-title">
						<text>*</text>
						<view>经营范围</view>
					</view>
					<view class="input-box">
						<input type="text" disabled v-model="commitData.business_scope" />
					</view>
				</view>
				<view class="apply-each">
					<view class="apply-title">
						<text>*</text>
						<view>统一社会信用代码</view>
					</view>
					<view class="input-box">
						<input type="text" disabled v-model="commitData.company_number" />
					</view>
				</view>
				<view class="apply-each">
					<view class="apply-title">
						<text>*</text>
						<view>公司类型</view>
					</view>
					<view class="input-box">
						<input type="text" disabled v-model="commitData.company_type" />
					</view>
				</view>
				<view class="apply-each">
					<view class="apply-title">
						<text>*</text>
						<view>注册时间</view>
					</view>
					<view class="input-box">
						<input type="text" disabled v-model="commitData.register_time" />
					</view>
				</view>
			</view>

			<view class="commit-btn" @click="apply">
				提交
			</view>
		</view>
		<u-modal v-model="showPhone" title="提示" @confirm="VerifyMobile">
			<view class="slot-content">
				<input type="number" v-model="commitData.phone" placeholder="请输入手机号" />
			</view>
		</u-modal>
		<u-modal v-model="showStatus" title="提示" content="您已开店成功,请登录" @confirm="confirm"></u-modal>
		<u-picker v-model="showP" mode="selector" :default-selector="[0]" @confirm="confirmCity" :range="cityList"
			range-key="name"></u-picker>
	</view>
</template>

<script>
	let t1;
	let time = 60;
	export default {
		data() {
			return {
				current: 0,
				txt: "选择城市",
				isSend: false,
				sendcodetext: "获取验证码",
				commitData: {
					shopname: "",
					shopAddress: "",
					logo: '',
					linkman: "", //联系人
					phone: "",
					code: "",
					legalperson1: "",
					legalperson2: "",
					businesslicense: '',
					email: "",
					company_name:"",
					company_address:"",
					company_price:"",
					company_user_name:"",
					business_scope:"",
					company_number:"",
					company_type:"",
					register_time:""
				},
				showP: false,
				showStatus: false,
				cityList: [],
				index: 0,
				showPhone: false,
				title: '',
				description: '',
				isbus:false
			}
		},
		onLoad() {
			this.getOpenList()
			let shopid = uni.getStorageSync('shopid')
			if (shopid) {
				this.getShopInfo(shopid)
			}else{
				this.showPhone = true
			}
		},
		methods: {
			getShopInfo(id) {
				var that = this
				this.request.httpTokenRequest({
					url: "store.store/getStoreInfo",
					method: "get"
				}, {
					id: id
				}).then(function(data) {
					if (data.code == 0) {
						if (data.data.status == 2) {
							that.showPhone = true
						} else {
							that.title = (data.data.status == 1 ? '审核中' : data.data.status == 2 ? '审核通过' : data.data.status == 3 ? '审核失败' : '')
							
							that.commitData.shopname = data.data.store_name
							that.commitData.linkman = data.data.name
							that.commitData.shopAddress = data.data.address
							that.commitData.phone = data.data.mobile
							that.commitData.email = data.data.email
							that.commitData.company_name = data.data.company_name
							that.commitData.company_address = data.data.company_address
							that.commitData.company_price = data.data.company_price
							that.commitData.company_user_name = data.data.company_user_name
							that.commitData.business_scope = data.data.business_scope
							that.commitData.company_number = data.data.company_number
							that.commitData.register_time = data.data.register_time
							that.commitData.legalperson1 = data.data.zheng.image
							that.commitData.legalperson2 = data.data.fan.image
							that.commitData.logo = data.data.logo.image
							that.commitData.businesslicense = data.data.yyzz.image
							
							if (data.data.status == 3) {
								that.description = data.data.remark
							}
						}

					} else {
						that.isSend = false
					}
				})
			},
			confirm() {
				uni.redirectTo({
					url: "/pages/login/login"
				})
			},
			VerifyMobile() {
				var that = this
				this.request.httpTokenRequest({
					url: "store.store/getStoreInfoByMobile",
					method: "get"
				}, {
					mobile: this.commitData.phone
				}).then(function(data) {
					if (data.code == 0) {
						uni.setStorage({
							key: 'shopid',
							data: data.data.id,
							success: function() {}
						});
						that.title = (data.data.status == 1 ? '审核中' : data.data.status == 2 ? '审核通过' : data.data.status == 3 ? '审核失败' : '')
						
						that.commitData.shopname = data.data.store_name
						that.commitData.linkman = data.data.name
						that.commitData.shopAddress = data.data.address
						that.commitData.phone = data.data.mobile
						that.commitData.email = data.data.email
						that.commitData.company_name = data.data.company_name
						that.commitData.company_address = data.data.company_address
						that.commitData.company_price = data.data.company_price
						that.commitData.company_user_name = data.data.company_user_name
						that.commitData.business_scope = data.data.business_scope
						that.commitData.company_number = data.data.company_number
						that.commitData.register_time = data.data.register_time
						that.commitData.legalperson1 = data.data.zheng.image
						that.commitData.legalperson2 = data.data.fan.image
						that.commitData.logo = data.data.logo.image
						that.commitData.businesslicense = data.data.yyzz.image
						
						if (data.data.status == 3) {
							that.description = data.data.remark
						}
						if (data.data.status == 2) {
							that.showStatus = true
						}
					} else {
						that.isSend = false
					}
				})
			},
			change(data) { //城市返回值
				this.txt = data.data.join('-')

			},
			chooseImg(type) {
				var that = this
				this.$util.chooseImage({
					count: 1,
				}, res => {
					uni.showLoading({
						title: '上传图片中',
					})
					if (type == 3) {
						this.$util.uploadDetection('picture', res.tempFilePaths[0], result => {
							if (result.code == 0) {
								that.commitData.businesslicense = result.data.url
								that.isbus = true
								that.commitData.company_name = result.data.data.companyName
								that.commitData.company_address = result.data.data.businessAddress
								that.commitData.company_price = result.data.data.registeredCapital
								that.commitData.company_user_name = result.data.data.legalPerson
								that.commitData.business_scope = result.data.data.businessScope
								that.commitData.company_number = result.data.data.creditCode
								that.commitData.company_type = result.data.data.companyType
								that.commitData.register_time = result.data.data.RegistrationDate
								uni.hideLoading()
							} else {
								uni.hideLoading()
								that.$util.msg(result.msg)
							}
						}, 2)
					} else {

						this.$util.upload('picture', res.tempFilePaths[0], result => {
							if (result.code == 0) {
								if (type == 1) { //法人1
									that.commitData.legalperson1 = result.data.url
								} else if (type == 2) { //法人2
									that.commitData.legalperson2 = result.data.url
								}
								uni.hideLoading()
							} else {
								that.$util.msg(result.msg)
							}
						}, 1)
					}

					uni.hideLoading()
				})

			},
			chooseImg2(type) {
				var that = this
				this.$util.chooseImage({
					count: 1,
				}, res => {
					uni.showLoading({
						title: '上传图片中',
					})
					this.$util.upload('picture', res.tempFilePaths[0], result => {
						if (result.code == 0) {
							if (type == 0) { //logo
								that.commitData.logo = result.data.url
							}
							uni.hideLoading()
						} else {
							uni.hideLoading()
							that.$util.msg(result.msg)
						}
					})
					uni.hideLoading()
				})

			},
			getOpenList() {
				var that = this
				this.request.httpTokenRequest({
					url: "index/getOpenCity",
					method: "get"
				}, {}).then(function(data) {
					if (data.code == 0) {
						that.cityList = data.data
					} else {
						that.isSend = false
					}
				})
			},
			confirmCity(data) {
				this.index = data
			},
			sendCode() {
				let that = this
				if (this.$util.phoneVerify(that.commitData.phone)) {
					this.isSend = true
					this.request.httpTokenRequest({
						url: "index/sendSms",
						method: "post"
					}, {
						scene: "104",
						mobile: that.commitData.phone
					}).then(function(data) {
						if (data.code == 0) {
							t1 = setInterval(() => {
								if (time <= 0) {
									time = 60
									that.sendcodetext = '重新获取'
									that.isSend = false
									clearInterval(t1)
								} else {
									--time
									that.sendcodetext = time + 's'
								}
							}, 1000)
						} else {
							that.isSend = false
							clearInterval(t1)
						}
					})
				}

			},
			verification() {
				if (this.commitData.shopname == '') {
					this.$util.msg('请填写店铺名称')
					return false
				} else if (this.commitData.shopAddress == '') {
					this.$util.msg('请填写店铺位置')
					return false
				} else if (this.commitData.linkman == '') {
					this.$util.msg('请填写联系人')
					return false
				} else if (this.commitData.phone == '') {
					this.$util.msg('请填写手机号')
					return false
				} else if (this.commitData.email == '') {
					this.$util.msg('请填写邮箱')
					return false
				} else if (this.commitData.code == '') {
					this.$util.msg('请填写验证码 ')
					return false
				} else if (this.commitData.legalperson1 == '') {
					this.$util.msg('请上传身份证正面 ')
					return false
				} else if (this.commitData.legalperson2 == '') {
					this.$util.msg('请上传身份证反面 ')
					return false
				} else if (this.commitData.logo == '') {
					this.$util.msg('请上传LOGO ')
					return false
				} else if (this.commitData.businesslicense == '') {
					this.$util.msg('请上传营业执照 ')
					return false
				} else {
					return true
				}
			},
			apply() {
				var that = this
				if (!this.verification()) {
					return
				}
				this.request.httpTokenRequest({
					url: "store.store/applyStore",
					method: "post"
				}, {
					store_name: this.commitData.shopname,
					city: this.cityList[this.index].name,
					address: this.commitData.shopAddress,
					name: this.commitData.linkman,
					mobile: this.commitData.phone,
					code: this.commitData.code,
					zheng: this.commitData.legalperson1,
					fan: this.commitData.legalperson2,
					logo: this.commitData.logo,
					yyzz: this.commitData.businesslicense,
					email: this.commitData.email,
					company_name: this.commitData.company_name,
					company_address: this.commitData.company_address,
					company_price:this.commitData.company_price,
					company_user_name:this.commitData.company_user_name,
					business_scope:this.commitData.business_scope,
					company_number:this.commitData.company_number,
					company_type:this.commitData.company_type,
					register_time:this.commitData.register_time
				}).then(function(data) {
					if (data.code == 0) {
						that.$util.msg(data.msg)
						uni.setStorage({
							key: 'shopid',
							data: data.data.id,
							success: function() {}
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}, 1500)
					} else {
						that.isSend = false
						that.$util.msg(data.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 42rpx;
	}

	.apply-type {
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #383838;
		line-height: 88rpx;
		margin-top: 34rpx;

		.lines {
			width: 1rpx;
			height: 30rpx;
			background-color: #979797;
			// margin: 0 30rpx;
		}

		.apply-type-content {
			text-align: center;
			width: 49%;
		}

		.apply-type-selelct {
			width: 49%;
			font-size: 30rpx;
			font-weight: 600;
			color: #3393FF;
			text-align: center;
		}
	}

	//
	.apply-info {
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 30rpx;
		margin-top: 30rpx;

		.apply-info-title {
			.title {
				font-size: 34rpx;
				font-weight: 500;
				color: #383838;
				line-height: 48rpx;
			}

			.hint-text {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #9C9C9C;
				line-height: 37rpx;
				margin-top: 12rpx;
			}
		}

		.apply-each {
			margin-top: 32rpx;

			.apply-title {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #383838;
				line-height: 42rpx;
				display: flex;
				align-items: center;

				text {
					font-size: 30rpx;
					color: #FF0000;
				}
			}

			.input-box {
				min-height: 68rpx;
				border-radius: 6rpx;
				border: 1rpx solid #CDCDCD;
				margin-top: 10rpx;
				line-height: 68rpx;

				input {
					height: 68rpx;
					line-height: 68rpx;
					padding: 0 30rpx;
					font-size: 28rpx;
				}

				.code {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #EE972D;
					margin-left: auto;
					margin-right: 30rpx;
				}
			}

			.imgs-content {
				// padding: 30rpx;
				border: 0;

				.fa-code {
					width: 100%;
					height: 249rpx;
				}

				.add-img {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.card-img {
						width: 49%;

						.icon-img {
							width: 100%;
							height: 198rpx;
						}

						font-size: 26rpx;
						font-family: PingFangSC,
						PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 37rpx;
						text-align: center;
					}

					.show-img {
						width: 270rpx;
						height: 270rpx;
						background: #FFFFFF;
						border-radius: 10rpx;
						border: 1rpx solid #EAEAEA;
						flex: 0 0 auto;
					}

					.click-img {
						width: 270rpx;
						height: 270rpx;
						box-sizing: border-box;
						background: #EEEEEE;
						border-radius: 10rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						line-height: 37rpx;
						text-align: center;
						padding-top: 77rpx;
						flex: 0 0 auto;

						.icon-img {
							width: 50rpx;
							height: 50rpx;
							margin-bottom: 19rpx;
						}
					}
				}

				.hint-text {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 33rpx;
					margin-top: 28rpx;
				}
			}
		}

		.commit-btn {
			width: 633rpx;
			height: 68rpx;
			background: #3393FF;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 68rpx;
			text-align: center;
			margin-top: 30rpx;
		}

	}

	.slot-content {
		text-align: center;
		padding: 30rpx 0;

		input {
			margin: 0 auto;
			height: 60rpx;
		}
	}
</style>